<template>
  <div class="form-content" :style="{ padding: toggle ? '24px 30px' : '17px 20px' }">
    <div class="form-box" :style="{ textAlign: toggle ? 'center' : 'left' }">
      <span class="form-title" v-if="toggle">{{ title }}</span>
      <Breadcrumb v-else>
        <BreadcrumbItem v-for="(item, index) in list" :key="index">
          <span
            :style="{ color: index == list.length - 1 ? '#1153D8' : '#333', fontSize: ' 14px' }"
            >{{ item.title }}</span
          >
        </BreadcrumbItem>
      </Breadcrumb>

      <span class="form-toggle" :class="{ active: toggle }" @click="handleToggle"
        ><DownOutlined />{{ toggle ? '收起' : '展开' }}工程</span
      >
    </div>

    <template v-if="toggle">
      <div class="form-person"> 现场管理员：{{ userName || '-' }}</div>
      <StepBar :data="data" />
    </template>
    <div class="separation" v-else> </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { Breadcrumb, BreadcrumbItem } from 'ant-design-vue';
  import { StepBar } from '/@/components/ModelTable/src/components/customCom/components/Asteps';
  const $props = defineProps({
    title: {
      type: String,
      default: '-',
    },
    userName: {
      type: String,
      default: '-',
    },
    data: {
      type: Array,
      default: () => [],
    },
  });
  const stepTitle = computed(() => {
    const arr: any[] = $props.data.filter((i) => i.state !== 0);
    let title = '-';
    if (arr.length) {
      title = arr[arr.length - 1].projectStateName;
    }

    return title;
  });
  interface ListObj {
    title: string;
  }

  watch(
    () => $props.title,
    () => {
      handleToggle();
    },
  );
  const list = ref<ListObj[]>([]);
  const $emit = defineEmits(['change']);

  const toggle = ref<boolean>(true);

  const handleToggle = () => {
    toggle.value = !toggle.value;
    list.value = [
      { title: $props.title },
      { title: `现场管理员${$props.userName || '-'}` },
      { title: stepTitle.value },
    ];
    $emit('change', toggle.value);
  };
</script>

<style lang="less" scoped>
  .form-content {
    padding: 24px 30px;
    position: relative;
    min-height: 56px;

    .form-box {
      position: relative;

      .form-title {
        color: #333333;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
      }

      .form-toggle {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        color: #1153d8;
        cursor: pointer;

        .anticon-down {
          transition: all 0.3s;
        }
      }

      .active {
        .anticon-down {
          transform: rotate(-180deg);
        }
      }
    }

    .form-person {
      color: #666666;
      font-size: 14px;
      text-align: center;
      margin-bottom: 24px;
    }

    .separation {
      background: #f2f3f5;
      height: 20px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: -12px;
    }
  }
</style>
